<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/nav.css">
</head>
<body>
<nav class="navbar navbar-default" style="text-align: center">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="../images/log.png" alt="授教网">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">免费课程</a></li>
                <li><a href="#">课程实战</a></li>
                <li><a href="#">专栏</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
            </ul>
            <div class="navbar-left form-group search-area">
                <input type="text" class="t-search" placeholder="">

                <div class="searchTags">
                    <a href="#"><span class="badge">java</span></a>
                    <a href="#"><span class="badge">Python</span></a>
                </div>
                <div class="showhide-search">
                    <span class="glyphicon glyphicon-search search-ico" aria-hidden="true"></span>
                </div>
                <div class="search-area-result">
                    <div class="hot">
                        <h5>热搜</h5>
                        <div class="hot-box">
                            <a href="#"><span class="badge">java</span></a>
                            <a href="#"><span class="badge">c++</span></a>
                            <a href="#"><span class="badge">算法</span></a>
                            <a href="#"><span class="badge">面试</span></a>
                            <a href="#"><span class="badge">UI</span></a>
                            <a href="#"><span class="badge">Python</span></a>
                            <a href="#"><span class="badge">java</span></a>
                            <a href="#"><span class="badge">java</span></a>
                        </div>
                    </div>
                    <div class="history">
                        <ul>
                            <li>java</li>
                            <li>5555</li>
                            <li>555</li>
                            <li>6666</li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="nav navbar-nav navbar-left">
                <li class="mes"><a href="#">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                    消息
                    <span class="badge">3</span></a></li>
                <li class="shop-car-l">
                    <span class="glyphicon  car-ico">
                    </span>
                    <a href="#" class="shop-car">购物车</a>
                    <div class="dropdown-menu shop-car-d">
                        <div class="cat-title-text">
                            <h2>我的购物车</h2>
                            <h5>
                                已加入
                                <span class="js-incart-num">0</span>
                                门课程
                            </h5>
                        </div>
                        <div id="car-no">
                            <div class="ico-shopping">

                            </div>
                            <h3>购物车空空如也</h3>
                            <div class="text">快去这里选中意的课程吧</div>
                            <p><a href="#">实战课程</a></p>
                            <p><a href="#">就业课程</a></p>
                        </div>
                        <div id="car-have">
                            <div id="js-card-ul">
                                <ul>
                                    <li class="car-course">
                                        <a href="#">
                                            <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                 width="105"/></a>
                                        <div class="content-box">
                                            <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                            <p class="clearfix">
                                                <span class="price">￥250.0</span>
                                                <span class="del">删除</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li class="car-course">
                                        <a href="#">
                                            <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                 width="105"/></a>
                                        <div class="content-box">
                                            <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                            <p class="clearfix">
                                                <span class="price">￥250.0</span>
                                                <span class="del">删除</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li class="car-course">
                                        <a href="#">
                                            <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                 width="105"/></a>
                                        <div class="content-box">
                                            <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                            <p class="clearfix">
                                                <span class="price">￥250.0</span>
                                                <span class="del">删除</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li class="car-course">
                                        <a href="#">
                                            <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                 width="105"/></a>
                                        <div class="content-box">
                                            <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                            <p class="clearfix">
                                                <span class="price">￥250.0</span>
                                                <span class="del">删除</span>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="more-box">
                                <span><a href="#">我的购物中心</a></span>
                                <a href="#">
                                    <span class="car-go">去购物车</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>

<!--                头像-->
                <li id="header-user-card">
                    <a id="header-avator" href="">
                        <img src="../images/head.jpg" alt="">
                    </a>
                    <div class="header-d dropdown-menu">
                        <div class="card-inner">
                            <div class="card-top">
                                <a href="#">
                                    <img src="../images/head.jpg" alt="">
                                </a>
                                <div class="card-top-right-box">
                                    <a href="#">
                                        <span class="name">
                                            qq_foreverlove沉_0
                                        </span>
                                    </a>
                                    <div class="meta">
                                        <a href="#">
                                            经验
                                            <b id="js-user-mp">1785</b>
                                        </a>
                                        <a href="#">
                                            积分
                                            <b id="js-user-credit">1785</b>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="user-center-box">
                                <ul>
                                    <li><a href=""><span class="glyphicon glyphicon-calendar"></span>我的课程</a></li>
                                    <li><a href=""><span class="glyphicon glyphicon-list-alt"></span>订单中心</a></li>
                                    <li><a href=""><span class="glyphicon glyphicon-gift"></span>积分商城</a></li>
                                    <li><a href=""><span class="glyphicon glyphicon-cog"></span>个人设置</a></li>
                                </ul>
                            </div>
                            <div class="card-history">
                                <span class="history-item">
                                    <span class="tit text-ellipsis">使用ViewPager实现卡片式问答项目（上）</span>
                                    <span class="media-name text-ellipsis">1-1 课程介绍</span>
                                    <span class="glyphicon glyphicon-time"></span>
                                    <a class="continue" href="">继续</a>
                                </span>
                            </div>
                            <div class="card-sets">
                                <a href="">安全退出</a>
                            </div>
                        </div>

                    </div>
                </li>
                <li class="header-signin" style="display: none">
                    <a id="js-signup-btn">注册</a>
                    /
                    <a id="js-signin-btn">登录</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--登录界面-->
<div class="modal-backdrop" id="modal-backdrop" style="display: none"></div>
<div id="signin" class="rl-modal" style="display: none">
    <div class="rl-modal-header">
        <button class="rl-close" type="button"></button>
        <h1>
            <span class="btn-login">登录</span>
            <span class="btn-register active-title">注册</span>
        </h1>
    </div>
    <div id="signup" class="rl-modal-body ">
        <form id="signup-form" action="">
            <div class="rlf-group">
                <input id="register-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入注册的手机号"
                       name="phone" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的手机号</p>
            </div>

            <div class="rlf-group has-error">
                <a href="#" class="verify-img-wrap" id="changeImg">
                    <canvas class="show-captcha" id="canvas" width="130" height="38"></canvas>
                </a>
                <input id="register-pictureCheck" type="text" class="ipt" maxlength="6" value="" placeholder="请输入验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的验证码</p>
            </div>
            <div class="rlf-group phoneVerityBox">
                <input type="checkbox" class="auto-cbx" autocomplete="off">&nbsp;&nbsp;同意
                <a href="" class="ipt-agreement">《授教网注册协议》</a>
            </div>
            <p id="signin-globle-error"></p>
            <div class="rlf-group phoneVerityBox">
                <input id="moco-btn-register" type="button" class="moco-btn" value="注册">
            </div>
        </form>
    </div>

    <div id="register-signin" class="rl-modal-body " style="display: none">
        <form id="signin-form" action="">
            <p class="title">填写短信验证码密码完成注册</p>
            <p class="subtitle">
                短信验证码已发送至
                <span name="phone"  class="js-phoneNumber">17606556909</span>
<!--                <input type="text" name="phone" style="display: none" value="17606556909">-->
            </p>

            <div class="rlf-group js-phoneVerityBox">
                <p class="rsSend">
                    <button type="button" class="js-register-send" state="false">重新发送</button>
                </p>
                <input id="register-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap"></p>
            </div>
            <div class="rlf-group">
                <a class="proclaim-btn" hidefocus="true">
                    <span class="glyphicon glyphicon-eye-close"></span>
                </a>
                <input id="register-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入6-16位密码,区分大小写,不能用空格"
                       name="pwd" autocomplete="off">
                <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
            </div>
            <div class="rlf-group">
                <input type="button" class="moco-btn moco-btn-register1" value="完成">
            </div>
            <p class="backNotify">返回修改手机号</p>
        </form>
    </div>

    <div class="rl-modal-body js-loginWrap" style="display: none">
        <div>
            <form id="signup-form" action="">
                <div class="rlf-group">
                    <input id="login-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入登录的手机号"
                           name="phone" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入正确的手机号</p>
                </div>
                <div class="rlf-group js-loginPassword">
                    <a class="proclaim-btn" hidefocus="true">
                        <span class="glyphicon glyphicon-eye-close"></span>
                    </a>
                    <input id="login-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入密码"
                           name="password" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
                </div>
                <div class="rlf-group js-phoneVerityBox">
                    <p class="rsSend">
                        <button type="button" class="js-signin-send" state="true" >获取验证码</button>
                    </p>
                    <input id="login-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                           name="checkno" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6位纯数字的短信验证码</p>
                </div>
                <div class="rlf-group phoneVerityBox">
                        <input type="checkbox" class="auto-cbx auto-login" autocomplete="off">&nbsp;&nbsp;7天内自动登录
                    <a href="#" class="rlf-forget">找回密码</a>
                </div>
                <p id="login-globle-error">账号密码错误</p>
                <div class="rlf-group phoneVerityBox">
                    <input type="button" loginway="code" class="moco-btn moco-btn-login" value="登录">
                </div>
                <div class="rlf-group phoneVerityBox">
                    <span class="rlf-other" state="loginPassword">账号密码登录</span>
                </div>
            </form>
        </div>
    </div>
    <div class="rl-modal-body reg-success1" style="display: none;text-align: center">
        <span class="icon-send-success">
            <span class="glyphicon glyphicon-ok"></span>
        </span>
        <p>恭喜注册成功</p>
        <div class="rlf-group" style="text-align: center">
            <input type="text" class="moco-btn js-gotoLearn" value="返回登录">
            <div>
                <a href="">完善资料</a>
            </div>
        </div>
    </div>
</div>
<script src="../js/jQuery%20v3.3.1.js"></script>
<script>
    $("nav a").attr("target","_parent")
</script>
<!--<script src="../js/changImg.js"></script>-->
<script src="../js/nav.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>